<!-- 活动类型管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {} }">
        <GzTextUp v-model:value="searchData['agentNo']" placeholder="机构号" />    
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['isConsume']" :placeholder="'是否已消耗'">
            <a-select-option :value="0">未消耗</a-select-option>
            <a-select-option :value="1">已消耗</a-select-option>
          </a-select>
        </a-form-item>
      </GzSearchForm>
      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="activityTypeId"
        :scrollX="0"
      >
        <!-- <template #topBtnSlot> -->
        <!-- <a-button v-if="$access('ENT_ACTIVITY_TYPE_INFO_ADD')" @click="download">
            下载模版
          </a-button> -->
        <!-- <a-button v-if="$access('ENT_ACTIVITY_TYPE_INFO_ADD')" type="primary" @click="exportDate">
            导入数据
          </a-button> -->

        <!-- <a-upload      
            v-model:file-list="fileList"   
            name="file"
            :maxCount="1"
            accept=".xlsx, .xls"
            :data="formParams"
            :action="action" 
            :beforeUpload="beforeUpload" 
            @change="uploadChange"
          >
            <a-button>
              <upload-outlined />
              导入数据
            </a-button>
          </a-upload> -->
        <!-- <a-select
            ref="select"
            v-model:value="supplierId"
            placeholder="选择供应商"
            style="width: 200px;"
            :options="supplierList"
            @change="handleChange"
          /> -->
        <!-- </template> -->

        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'goodsImgListSmall'">
            <a-image :src="record.goodsImgListSmall" />
          </template>
          <template v-if="column.key == 'isConsume'">
            <template v-if="record.isConsume == 0">
              否
            </template>
            <template v-if="record.isConsume == 1">
              是
            </template>
          </template>

          <template v-if="column.key == 'operation'">
            <!-- <a-button v-if="$access('ENT_ACTIVITY_TYPE_INFO_DEL')" type="link" danger
              @click="activityTypeDelete(record.activityTypeId)">删除</a-button> -->
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 新增OR修改 -->
    <!-- <AddOrEdit ref="addOrEditRef" :callBackFunc="searchFunc"/> -->
  </page-header-wrapper>
</template>

<script lang="ts" setup>
// import AddOrEdit from "./AddOrEdit.vue";
// import { req, API_URL_VIRTUAGOODS_CDK, $activityTypeDelete, $getSupplierList,$getUploadFormParams,API_URL_VIRTUALAWARD_CKD } from '@/api/manage'
import {$apiVirtualAwardCdk,$getSupplierList,$getUploadFormParams,$apiVirtualAwardCdkImportCdk} from '@/api/externalGoods/CDK/index'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
// import axios from 'axios'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties


const infoTableRef = ref()
const addOrEditRef = ref()
const supplierId = ref(null) as any
const tableColumns = reactive([
{ key: 'goodsName', title: '商品名称', dataIndex: 'goodsName' },
  { key: 'agentNo', title: '机构号', dataIndex: 'agentNo' },
  { key: 'agentName', title: '机构名称', dataIndex: 'agentName' },
  { key: 'cdk', title: 'CDK', dataIndex: 'cdk' },
  { key: 'goodsImgListSmall', title: '商品图片', dataIndex: 'goodsImgListSmall' },
  { key: 'isConsume', title: '是否已消耗', dataIndex: 'isConsume' },
  { key: 'remark', title: '备注', dataIndex: 'remark' },
  // { key: 'operation', title: '操作', dataIndex: 'operation', align: 'center' }
])
const searchData: any = ref({})
const supplierList = ref([])
const fileList = ref([])
const action = ref() as any
const formParams = ref() as any
const ossFileUrl = ref() as any
// onMounted(() => {
//   getSupplierList()
// })
function handleChange() { }

// function getSupplierList() {
//   $getSupplierList(1).then(res => {
//     supplierList.value = res.records.map(item => {
//       item.label = item.supplierName
//       item.value = item.supplierId
//       return item
//     })
//   })
// }
// 请求table接口数据
function reqTableDataFunc(params: any) {
  return $apiVirtualAwardCdk(params)
}


// const download = async () => {
//   // 帮我写下载模版代码
//   const response = await axios.get('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/8c6c1bdc-f9d0-4232-8671-ec807e6cbf89.xlsx', { responseType: 'blob' })
//   const blob = response.data
//   const url = URL.createObjectURL(blob)
//   const link = document.createElement('a')
//   link.href = url
//   link.download = '数据模版.xlsx'
//   link.click()
//   URL.revokeObjectURL(url)
// }

/**
 * 文件上传
 */
//  function beforeUpload(file) {
//   if (supplierId.value == '') {
//     // 提示先选择供应商
//     $infoBox.message.warning('请先选择供应商！')
//     return false
//   }
//   // 校验文件大小 不大于20MB
//   const isLt20M = file.size / 1024 / 1024 < 20
//   if (!isLt20M) {
//     $infoBox.message.warn('文件大小不能超过20MB！')
//     return false
//   }
//   // 校验文件格式
//   const isExcel = /\.(xlsx|xls)$/.test(file.name)
//   if (!isExcel) {
//     $infoBox.message.warn('文件格式必须为XLS/XLSX！')
//     return false
//   }
//   return $getUploadFormParams(file, 'yx').then(res => {
//     action.value = res.formActionUrl // action 
//     formParams.value = res.formParams //表单组件 
//     ossFileUrl.value = res.ossFileUrl
//   })
// }
// function uploadChange(info) {
//   if (info.file.status === 'error') { // 上传异常
//     fileList.value = []
//     $infoBox.message.error('上传异常,请联系系统管理员')
//   } if (info.file.status === 'done') {
//     // 上传成功
//     complete()
//   }
// }

// function complete() {
//   const data ={
//     supplierId:supplierId.value,
//     ossFileUrl:ossFileUrl.value
//   }
//   req
//     .add(API_URL_VIRTUALAWARD_CKD,data)
//     .then((res) => {    
//           $infoBox.message.success('生成成功')
//           infoTableRef.value.refTable(true)
//     })
// }
function searchFunc() {
  infoTableRef.value.refTable(true)
}


</script>


<style  scoped>

::v-deep(.ant-upload-list) {
  display: none;
}
    :deep(img){
    width: 80px;
    height: 80px;
    object-fit: cover;
  }

  </style>